<template>
    <div>
        <table class="tb">
            <tr>
                <th>
                    <label for="all">全选</label>
                    <input type="checkbox" id="arr" v-model="all"
                    @click="handleALL" >
                </th>
                <th>产品图片</th>
                <th>编号</th>
                <th>品牌名称</th>
                <th>价格</th>
                <th>数量</th> 
                <th>操作</th>
            </tr>
            <tr v-for="(item, index) in goodsList" :key="item.id">
                <td>
                    <input type="checkbox" v-model="arr" :value="item">
                </td>
                <td>
                    <img height="80" :src="item.imgSrc">
                </td>
                <td>
                    {{ item.code }}
                </td>
                <td>
                    {{ item.productName }}
                </td>
                <td>
                    {{ item.price }}
                </td>
                <td>
                    <button @click="decrement(item)">-</button>
                    &nbsp;
                    <b>{{ item.count }}</b>
                    &nbsp;
                    <button @click="increment(item)">+</button>
                </td>
                <td>
                    <button @click="del(index)">删除</button>
                </td>
            </tr>
        </table>
       <div class="total add">
            <h1 style="text-align:right">总价格<b>{{total}}</b></h1>
       </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            arr: [],
            all:false,
            msg:"all",
         
        }
    },
    computed:{
         total(){
            if(this.arr.length==0){
                return "0.00"
            }else{
            return (this.arr.reduce((total, item)=>{
                  return  (total+=item.price*item.count);
               },0) ).toFixed(2)
            }
         }
    },
    watch:{
       arr(newVal){
            if(this.goodsList.length===newVal.length){
                this.all=true
            }else{
                this.all=false
            }
       },
       target:{
            handler(newVal){
                console.log(newVal);
                let id=newVal.id;
                this.arr=this.arr.filter(item=>{
                     return item.id!==id
                })
            },
            deep: true,
       }
    },
    
    methods: {
        handleALL(e){
            let checked=e.target.checked;
            if(checked){
            this.arr=this.goodsList;
           }else{
            this.arr=[]
           }
        },
        del(index) {
            this.$emit('del', index);
        },
        decrement(item) {
            if (item.count <= 1) {
                return
            }
            item.count--
        },
        increment(item) {
            item.count++
        }
    },
    props: {
        target:{
           type: Object, 
        },
        goodsList: {
            type: Array,
            default() {
                return [];
            }
        }
    }

}
</script>
<style scoped>
.tb {
    border-collapse: collapse;
    width: 100%;
}

.tb th {
    background-color: #0094ff;
    color: white;
}

.tb td,
.tb th {
    padding: 5px;
    border: 1px solid black;
    text-align: center;
}
</style>